<template>
    <el-dialog ref="dialog" :close-on-click-modal="false" width="50%">
        <div>
            <slot />
        </div>
        <template #footer>
            <div class="dialog-footer">
                <el-button @cancel="handleCancel">取消</el-button>
                <el-button type="primary" @click="handleConfirm" :Loading="confirmLoading">
                    添加
                </el-button>
            </div>
        </template>
    </el-dialog>
</template>
<script lang='ts' setup>
import { ref } from 'vue'
import type { IElDialog } from '@/types/element-plus'
import type { PropType } from 'vue'

const confirmLoading = ref(false)
const dialog = ref<IElDialog | null>(null)

const props = defineProps({
    confirm: {
        type: Function as PropType<() => Promise<void>>,
        default: () => Promise.resolve()
    }
})


const handleCancel = () => {
    if (dialog.value) {
        dialog.value.visible = false
    }
}
const handleConfirm = async () => {
    confirmLoading.value = true
    await props.confirm()
    confirmLoading.value = false
}

</script>
<style lang='scss' scoped></style>